<!--
  - Copyright (c) 2019.
  - 北京九思金信科技有限公司对该文件内容保留所有权利。
  - 未经许可，不得私自拷贝、传播、发布、引用该文件内容，违者将被追究法律责任。
  -->

<template>
  <div>
    <img ref="imgRef" :src="img" class="img-select" @click.stop="uploadHeadImg"/>
    <input type="file" accept="image/*" @change="handleFile" class="hiddenInput"/>
  </div>
</template>

<script>
  export default {
    name: "MessageImg",
    props: ['value', 'loadUuid'],
    mounted() {
      this.getImgUrl()
    },
    data() {
      return {
        img: null,
        status: true,
      }
    },
    methods: {
      select(value) {
        this.img = value.img
        this.$emit('imput', value.type)
      },
      getImgUrl() {
        if (this.value) {
          if (this.loadUuid) {
            this.img = '/joys-rest/joys-file/file/browse/one2one/' + this.value + '?AUTH-TOKEN=' + localStorage.getItem('AUTH-TOKEN') + '?loadUuid=' + this.loadUuid
          } else {
            this.img = '/joys-rest/joys-file/file/browse/one2one/' + this.value + '?AUTH-TOKEN=' + localStorage.getItem('AUTH-TOKEN')
          }
        } else {
          this.img = '../static/message/mess01.png'
        }
      },
      uploadHeadImg() {
        // if (this.value) {
        this.$el.querySelector('.hiddenInput').click()
        // } else {
        //   this.$message.warning('请先保存应用信息！')
        // }
      },
      handleFile(e) {
        let $target = e.target || e.srcElement
        if ($target.files.length > 0) {
          this.status = false
          let file = $target.files[0]
          var url = URL.createObjectURL($target.files[0])
          this.img = url
          this.$emit('return', file)
        }
      },
      handlePicture(file, sourceId) {
        var formData = new FormData()
        formData.append('sourceId', sourceId)
        formData.append('dirName', '/cloud')
        formData.append('file', file)
        formData.append('one2one', true)
        formData.append('overwrite', true)
        this.$http.post('/joys-rest/joys-file/file/upload', formData).then(resp => {
          // this.getImgUrl()
          this.fileId = resp.body.fileId
          this.status = true
          this.$message.success('图标上传成功!')
        }, resp => {
          this.$message.error('图标上传失败!')
        })
      }
    },
    watch:{
      loadUuid(){
        this.getImgUrl()
      }
  }
  }
</script>

<style scoped>
  .img-select {
    width: 30px;
    height: 30px;
    /*display: inline-block;*/
    /*box-shadow: 0px 0px 1px #cdcdcd;*/
    /*margin-left: 10px;*/
    /*margin-bottom: 10px;*/
  }

  .img-select:hover {
    box-shadow: 0px 0px 20px #cdcdcd;
    width: 30px;
    height: 30px;
  }

  .hiddenInput {
    display: none;
  }
</style>
